<template>
  <div :class="wrpCls">
    <a-dropdown :trigger="['click']" v-model="dropdownVisible">
      <a class="ant-dropdown-link" @click="e => e.preventDefault()">
        <a-icon type="notification"/>
      </a>
      <a-card slot="overlay" style="width:100%;" :tab-list="tabListNoTitle" :active-tab-key="noTitleKey">
        <div style="height: 200px">
          <happy-scroll color="rgba(51,51,51,0.2)" resize size="5">
            <a-list :data-source="data">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta :description="item.email">
                  <a slot="title" :href="item.href">{{ item.name.last }}</a>
                  <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
                </a-list-item-meta>
                <div>Content</div>
              </a-list-item>
            </a-list>
          </happy-scroll>
        </div>
      </a-card>
    </a-dropdown>
    <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls"/>
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'

const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo'
export default {
  name: 'RightContent',
  components: {
    AvatarDropdown
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      dropdownVisible: false,
      showMenu: true,
      currentUser: {},
      tabListNoTitle: [
        {
          key: 'notice',
          tab: '通知'
        },
        {
          key: 'bulletin',
          tab: '公告'
        }
      ],
      noTitleKey: 'notice',
      loading: true,
      loadingMore: false,
      showLoadingMore: true,
      data: [
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Mathew', 'last': 'Craig' }, 'email': 'mathew.craig@example.com', 'nat': 'IE' },
        { 'gender': 'female', 'name': { 'title': 'Ms', 'first': 'Andrea', 'last': 'Osullivan' }, 'email': 'andrea.osullivan@example.com', 'nat': 'IE' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Mathew', 'last': 'Reed' }, 'email': 'mathew.reed@example.com', 'nat': 'IE' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Roger', 'last': 'Woods' }, 'email': 'roger.woods@example.com', 'nat': 'IE' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' },
        { 'gender': 'male', 'name': { 'title': 'Mr', 'first': 'Argemiro', 'last': 'Oliveira' }, 'email': 'argemiro.oliveira@example.com', 'nat': 'BR' }
      ]
    }
  },
  computed: {
    wrpCls() {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${ (this.isMobile || !this.topMenu) ? 'light' : this.theme }`]: true
      }
    }
  },
  mounted() {
    this.onLoadMore()
  },
  methods: {
    onTabChange(key, type) {
      console.log(key, type)
      this[type] = key
    },
    onLoadMore() {
      this.loadingMore = true
      this.$http.get(fakeDataUrl).then(res => {
        this.data = this.data.concat(res.results)
        this.loadingMore = false
        this.$nextTick(() => {
          window.dispatchEvent(new Event('resize'))
        })
      })
    }
  }
}
</script>
<style lang="less">
  .ant-pro-account-notification {
    padding: 0 20px;
  }
</style>
